<style lang="less">
@import "./Banner.less";
</style>

<template>
  <div class="banner2-container">
    <div class="banner-wrap" :style="styleObject">
      <!-- 分类 -->
      <div class="category">
        <div class="category-list">
          <a
            v-for="(item, i) in categoryData"
            :key="i"
            :class="{ item, active: currCat == item.title }"
            @mouseover="handleShowSub(true, item)"
            @mouseout="handleShowSub(false)"
          >
            <span class="title">{{ item.title }}</span>
            <Icon
              type="ios-arrow-forward"
              size="20"
              color="rgba(255,255,255,0.5)"
            />
          </a>
        </div>
      </div>
      <!-- 分类详情 -->
      <div
        class="category-children"
        v-show="showSub"
        @mouseover="handleShowSubPanel(true)"
        @mouseout="handleShowSubPanel(false)"
      >
        <div class="children-wrap">
          <a class="item" v-for="(item, i) in secondCat" :key="i" @click="clickCategory(item)">
            <img :src="item.picUrl" width="40" height="40" />
            <span class="title">{{ item.title }}</span>
          </a>
        </div>
      </div>
      <!-- 轮播 -->
      <Carousel
        autoplay
        loop
        :radius-dot="true"
        :autoplay-speed="3500"
        :height="460"
        class="carousel"
        @on-click="clickBanner"
      >
        <CarouselItem v-for="(item, i) in bannerData" :key="i" style="cursor: pointer">
          <img :src="item.picUrl" />
        </CarouselItem>
      </Carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "BannerShop",
  data() {
    return {
      showSub: false,
      secondCat: [],
      catName: "",
      currCat: "",
    };
  },
  computed: {
    styleObject: function () {
      return {
        "--color": this.color,
      };
    },
  },
  props: {
    color: {
      type: String,
      default: "#2d8cf0",
    },
    bannerData: {
      type: Array,
      default: function () {
        return [
        ];
      },
    },
    categoryData: {
      type: Array,
      default: function () {
        return [
         
        ];
      },
    },
  },
  methods: {
    handleShowSub(show, v) {
      if (show) {
        this.currCat = this.catName = v.title;
        this.secondCat = v.children;
        this.showSub = true;
      } else {
        this.currCat = "";
        this.showSub = false;
      }
    },
    handleShowSubPanel(show) {
      if (show) {
        this.currCat = this.catName;
        this.showSub = true;
      } else {
        this.currCat = "";
        this.showSub = false;
      }
    },
    clickBanner(index) {
      this.$emit("on-click-banner", this.bannerData[index]);
    },
    clickCategory(v) {
      this.$emit("on-click-category", v);
    },
  },
  created() {},
};
</script>
